<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">更换手机号</p>
      </span>
      <div class="content pt30 pb30">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="原手机号" prop="oldMobile" class="mb24">
            <el-input v-model.trim="ruleForm.oldMobile" class="w300" disabled />
          </el-form-item>
          <el-form-item label="新手机" prop="updateMobile" class="mb24">
            <el-input v-model.trim="ruleForm.updateMobile" placeholder="请输入新手机号" class="w300" />
          </el-form-item>
          <el-form-item label="验证码" prop="updateCode">
            <el-input v-model.trim="ruleForm.updateCode" class="w300" placeholder="请输入验证码">
              <el-button v-if="newTimeShow" slot="append" @click="getNewSendCode('ruleForm')">获取验证码</el-button>
              <el-button v-if="!newTimeShow" slot="append">重新获取({{ NewCount }}秒)</el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getChangeLogoCancel('ruleForm')">取消</el-button>
        <el-button type="primary" @click="getChangeLogo('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import { validateMobile } from '@/utils/validate'
export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        oldMobile: '',
        oldName: '',
        updateMobile: '',
        updateCode: ''
      },
      rules: {
        updateMobile: [{ required: true, validator: validateMobile, trigger: 'blur' }],
        updateCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      newTimeShow: true,
      NewCount: '',
      newTimer: null
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('closeEvents', 'isLogo', val)
      }
    }
  },
  created() {
    this.ruleForm.oldMobile = JSON.parse(JSON.stringify(this.boothname)).mobile
    this.ruleForm.oldName = JSON.parse(JSON.stringify(this.boothname)).user
  },
  methods: {
    getChangeLogo(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          await api.boss.updateUserInfoMobile(this.ruleForm)
          this.$emit('closeEvents', true)
          this.$message({ message: '设置成功', type: 'success' })
        } else {
          return false
        }
      })
    },
    getChangeLogoCancel(formName) {
      this.$refs[formName].resetFields()
      this.$emit('closeEvents', false)
    },
    getNewSendCode(formName) {
      this.$refs[formName].validateField(['updateMobile'], async(valid) => {
        if (valid === '') {
          const params = {
            mobile: this.ruleForm.updateMobile,
            type: 3 // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
          }
          await api.login.getUserCode(params)
          const TIME_COUNT = 60
          if (!this.newTimer) {
            this.NewCount = TIME_COUNT
            this.newTimeShow = false
            this.newTimer = setInterval(() => {
              if (this.NewCount > 0 && this.NewCount <= TIME_COUNT) {
                this.NewCount--
              } else {
                this.newTimeShow = true
                clearInterval(this.newTimer)
                this.newTimer = null
              }
            }, 1000)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
          text-align: left;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        padding: 25px 40px;
        .content {
          .el-upload {
            .el-button {
              border: 1px solid #0C7FF2;
              color: #0C7FF2;
              padding: 8px 16px;
            }
          }
          .el-upload-list {
            display: none;
          }
          .crop-box {
            margin-top: 100px;
            @include flex(row, center, flex-start);
          }
          .crop-rotate {
            width: 330px;
            margin: 16px 0 30px;
            @include flex(row, center,center);
            .rotate-left {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              margin-right: 16px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
            .rotate-right {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
        .el-button {
          padding: 8px 16px;
        }
      }
      .el-form-item--medium .el-form-item__content{
        text-align: left;
        .el-input-group--append {
          .el-input-group__append {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
.pt30{
      padding-top: 30px;
  }
  .pb30{
      padding-bottom: 30px;
  }
  .mb24{
      margin-bottom: 24px;
  }
  .w300{
      width: 300px;
  }
</style>
